<!-- 群体流动，导入 -->
<template>
    <el-drawer
        :model-value="isUploadShow"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        title="群体流动-导入"
        size="800"
    >
        <template #default>
            <div style="display: flex; justify-content: space-between;">
                <!-- 手动上传按钮 -->
                <el-upload
                    class="upload-demo"
                    action="/api/cow-growth/upload-record-list"
                    :show-file-list="false"
                    :auto-upload="false"
                    :on-change="onChange"
                >
                    <template #trigger>
                        <el-button icon="Upload" type="primary">导入文件</el-button>
                    </template>
                </el-upload>
                <el-button icon="Download" @click="downLoadTemplate">下载模板</el-button>
            </div>
            <el-divider>
                <span>共计<span style="color: red; margin: 0 2px;">{{ tableData.length }}</span>条数据</span>
            </el-divider>
            <el-table :data="tableData" stripe border style="width: 100%; height: calc(100vh - 260px);">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="cowCode" label="牛号">
                    <template #default="scope">
                        <div style="display: flex; align-items: center;">
                            <span style="margin-right: 5px;">{{ scope.row.cowCode }}</span>
                            <el-tag v-if="scope.row.newCowCode" type="danger" effect="plain" size="small" round>新</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="exitDate" label="离场日期" />
                <el-table-column prop="exitReason" label="离场原因" />
                <el-table-column prop="saleArea" label="销售地区" />
                <el-table-column label="操作" fixed="right">
                    <template #default="{ $index }">
                        <el-button type="danger" icon="Delete" size="small" @click="delTableRow($index)" />
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelClick">取消</el-button>
                <el-button type="primary" @click="confirmClick">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { reqGetComNameList } from '@/api/company'
import { reqCowMovementSaveRecordList, reqCowMovementUploadRecordList } from '@/api/daily'
import { ElMessage, ElLoading } from 'element-plus'
import { getItem } from '@/utils/storage.js'

let props = defineProps(['isUploadShow']) // 接收父组件传递过来的值

// 注册自定义事件
let $emit = defineEmits(['closeUploadDialog'])

const headers = ref({ authorization: getItem('TOKEN')})

// 表单数据收集
const form = ref({
    cowId: '',
    fileId: ''
})

// 点击下载模板按钮
const downLoadTemplate = () => {
    let url = 'https://cos.iimpc.cn/template/%E7%94%9F%E9%95%BF%E5%8F%91%E8%82%B2%E6%A8%A1%E7%89%88%E8%A1%A8.xlsx'
    let a = document.createElement("a")
    a.style = "display: none"
    a.target = "_blank"
    // a.download = "file"
    a.href = url
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
}

// 点击导入牛群记录（上传）
let tableData = ref([])
const onChange = (data) => {
    const loading = ElLoading.service({
        lock: true,
        text: '正在导入',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const file = data.raw
    const fd = new FormData()
    fd.append('file', file)
    reqCowMovementUploadRecordList(fd).then((res) => {
        if(res.status == 200){
            tableData.value = res.data
            loading.close()
        }
    })
}

// 删除
const delTableRow = (index) => {
    tableData.value.splice(index, 1)
}

// 文件上传成功的钩子
const handleAvatarSuccess = (response) => {
    form.value.fileId = response.data
}

// 取消按钮
const cancelClick = () => {
    tableData.value = []
    $emit('closeUploadDialog', false)
}

// 保存按钮
const confirmClick = async () => {
    let res = await reqCowMovementSaveRecordList(tableData.value)
    if(res.status == 200){
        ElMessage({
            message: '导入成功',
            type: 'success'
        })
        $emit('closeUploadDialog', false)
        tableData.value = []
    }
}

// 请求牛号列表，选择牛号下拉菜单需要用到
let allComNameList = ref([])
const getComNameList = async () => {
    let res = await reqGetComNameList()
    allComNameList.value = res.data
}

// 组件挂载完毕执行
onMounted(() => {
    getComNameList()
})
</script>

<style scoped lang="scss">
.radio-txt{
    color: #999;
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
}
</style>